<template>
  <Tel
    :attributes="attributes"
    :events="events"
  >
    <template #com>
      <Search @search="search" @clear="clear">
        <el-form-item label="文本1">
          <el-input v-model="value" placeholder="请输入搜索内容"/>
        </el-form-item>
        <el-form-item label="列表1">
          <el-select v-model="value2" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
      </Search>
    </template>
    {{ code }}
  </Tel>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { Attribute, Event } from './type'
import Tel from './template/Tel.vue'
import Search from '@/components/Search/index.vue'
export default defineComponent({
  name: 'ExampleSearch',
  components: {
    Search,
    Tel
  },
  setup() {
    const attributes: Array<Attribute> = [
      {
        argu: 'slot',
        instruction: '需要显示的 el-form-item',
        type: 'string',
        option: '-',
        default: '-'
      }
    ]
    const events: Array<Event> = [
      {
        name: 'search',
        instruction: '点击搜索执行',
        argu: '-'
      },
      {
        name: 'clear',
        instruction: '点击重置执行',
        argu: '-'
      }
    ]
    const code: string = `
    <Search @search="search" @clear="clear">
      <el-form-item label="文本1">
        <el-input v-model="value" placeholder="请输入搜索内容"/>
      </el-form-item>
      <el-form-item label="列表1">
        <el-select v-model="value2" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-form-item>
    </Search>
    import Search from '@/components/Search/index.vue'
    `
    return {
      attributes,
      events,
      code
    }
  },
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      value2: ''
    }
  },
  methods: {
    search() {
      // eslint-disable-next-line no-console
      console.log('执行搜索')
    },
    clear() {
      // eslint-disable-next-line no-console
      console.log('清空搜索条件')
      this.value2 = ''
      this.value = ''
    }
  }
})
</script>
